<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>

<form>
    <p>
        <input type="text" name="userName" id="username">
    </p>
    <p>
        <input type="text" name="password" id="password">
    </p>
    <input type="button" value="登录" onclick="login()">
</form>
<div>
    <button onclick="hello()">访问</button>
    <button onclick="hi()">访问</button>
    <button onclick="list()">访问/list</button>
    <button onclick="deleteBook()">访问/delete</button>
    <button onclick="loginout()">登出</button>
</div>

<script>

    let token;

    function request(url,type,fn) {
        $.ajax({
            url:url,
            beforeSend: function(request){
                request.setRequestHeader("token", token);
            },
            type: type,
            success: fn
        })
    }

    function login() {
        let username = $('#username').val();
        let password = $('#password').val();
        $.post('doLogin',{'userName':username,'password':password},function (data) {
            console.log(data)
            token = data.data.token;
        })
    }

    function hello() {
        $.ajax({
            url:'hello',
            beforeSend: function(request){
                request.setRequestHeader("token", token);
            },
            type: 'GET',
            success: function (data) {
                console.log(data)
            }
        })
    }

    function hi() {
        request('hi','GET',function (data) {
            console.log(data)
        })
    }

    function list() {
        request('list','GET',function (data) {
            console.log(data)
        })
    }

    function deleteBook() {
        request('delete','GET',function (data) {
            console.log(data)
        })
    }

    function loginout(){
        request('doout','post',function (data){
            console.log(data);
        })
    }
</script>
</body>
</html>